<template>
  <div>
    <p class="gender" v-if="data === '未知'">
      <svg class="svgIcon" aria-hidden="true">
        <use xlink:href="#icon-nan"></use>
      </svg>
      <span>未知</span>
    </p>
    <p class="gender" v-if="data === '男性'">
      <svg class="svgIcon" aria-hidden="true">
        <use xlink:href="#icon-nan"></use>
      </svg>
      <span>男</span>
    </p>
    <p class="gender" v-else-if="data === '女性'">
      <svg class="svgIcon" aria-hidden="true">
        <use xlink:href="#icon-nv"></use>
      </svg>
      <span>女</span>
    </p>
    <!-- <span v-else>数据不匹配该显示类型</span> -->
  </div>
</template>
<script>
export default {
  name: "dtGender",
  props: ["data"],
  mounted() {}
};
</script>
<style lang="less">
p.gender {
  display: flex;
  align-items: center;
  .svgIcon {
    width: 20px;
    height: 20px;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
}
</style>
